<template>
  <div class="login">
    <LoginCanvas></LoginCanvas>
    <div class="login-form">
      <h2>登录</h2>
      <el-form :model="formData" ref="form" :rules="rules" size="large">
        <el-form-item prop="username">
          <el-input :prefix-icon="User" @keyup.enter.native="handleSubmit(form)" placeholder="请输入用户名" v-model="formData.username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input :prefix-icon="Lock" @keyup.enter.native="handleSubmit(form)" placeholder="请输入密码" v-model="formData.password"/>
        </el-form-item>
        <el-form-item prop="captcha">
          <div class="captchaBox">
            <el-input size="large" @keyup.enter.native="handleSubmit(form)" placeholder="请输入验证码" :prefix-icon="Bell" v-model="formData.captcha" />
            <div class="captcha" v-html="svg" @click="getCode"></div>
          </div>
        </el-form-item>
        <el-form-item label-width="0">
          <div class="btns">
            <el-button type="primary" @click="handleSubmit(form)">登录</el-button>
            <el-button type="success" @click="handleRegister">注册</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "login"
}
</script>

<script setup lang="ts">
import {onMounted, reactive, ref} from "vue"
import {userAuthcode, userLogin} from '@/api/system'
import {LoginType} from '@/type/loginType'
import {User, Lock, Bell} from "@element-plus/icons-vue"
import {FormInstance, FormRules} from 'element-plus'
import {useRouter} from 'vue-router'
import LoginCanvas from '@/pages/login/model/LoginCanvas.vue'

const router = useRouter()

const formData = reactive<LoginType>({
  username: '',
  password: '',
  uuid: 0,
  captcha: ""
})

const form = ref<FormInstance>()

const svg = ref<string>("")

const rules:FormRules<LoginType> = {
  username: [{
    required: true,
    message: '请输入用户名',
    trigger: 'blur'
  }],
  password: [{
    required: true,
    message: '请输入密码',
    trigger: 'blur'
  }],
  captcha: [{
    required: true,
    message: '请输入验证码',
    trigger: 'blur'
  }]
}

function getCode () {
  userAuthcode().then(res => {
    if (res.code === 200) {
      formData.uuid = res.data.timestr
      svg.value = res.data.code
    }
  })
}


const handleSubmit = (f: FormInstance | undefined) => {
  if (f) {
    f.validate(v => {
      if (v) {
        userLogin(formData).then(res => {
          if (res.code === 200) {
            sessionStorage.setItem('token', res.data.token)
            sessionStorage.setItem('user', JSON.stringify(res.data.user))
            router.push({
              name: "layout"
            })
          }else {
            getCode()
          }
        }).catch(err => {
          getCode()
        })
      }
      else {
        getCode()
      }
    })
  }
}

const handleRegister = () => {
  router.push({
    name: "register"
  })
}

const video = ref<HTMLVideoElement>()

onMounted( () => {
  getCode()
} )
</script>

<style scoped lang="scss">
.login {
  position: relative;
  width: 100vw;
  height: 100vh;
  .login-form {
    z-index: 1000;
    position: absolute;
    background-color: #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 16px;
    width: 400px;
    border: 1px solid #ccc;
    padding: 20px;
    box-shadow: 0 0 10px #ccc;
    h2{
      text-align: center;
      margin-bottom: 40px;
    }
    .captchaBox{
      display: flex;
      gap: 30px;
      align-items: center;
      justify-content: space-between;
      .captcha{
        border: 1px solid #ccc;
        height: 38px;
        cursor: pointer;
      }
    }
    .btns{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
